<template>
  <div class="mainpg">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="init-box">
          <div>
            <div class="item">
              <el-radio :label="1" v-model="radio">业务数据初始化</el-radio>
              <div class="tip_box">
                订单管理、采购管理、库房管理、财务管理、报表管理、配送管理（历史排线）、操作日志、商城（购物车、收藏、常用）将会清除
              </div>
            </div>
            <div class="item">
              <el-radio :label="2" v-model="radio"
                >商品、业务数据初始化</el-radio
              >
              <div class="tip_box">
                商品管理、商城管理（商城配置）、配送管理（体积重量）、业务数据所含内容将会清除
              </div>
            </div>
            <div class="item">
              <el-radio :label="3" v-model="radio"
                >用户、业务数据初始化</el-radio
              >
              <div class="tip_box">
                用户管理、配送管理（线路管理）、业务数据所含内容将会清除
              </div>
            </div>
            <div class="item">
              <el-radio :label="4" v-model="radio"
                >用户、商品、业务数据初始化</el-radio
              >
              <div class="tip_box">
                用户管理、商品管理、配送管理、业务数据所含内容将会清除
              </div>
            </div>
          </div>
          <div class="note">
            注：一旦数据初始化，对应的系统数据会被删除，清除数据将无法恢复，请认真阅读初始化下方的文字，以免导致数据误删！
          </div>
          <div class="btn">
            <el-button @click="handleInit" type="primary">立即初始化</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="400px">
      <span slot="title">
        <span class="title"><i class="el-icon-warning"> </i> 提示</span>
      </span>
      <div class="dialog_container">
        <p>请输入验证码确认初始化</p>
        <div class="line">
          <el-input v-model="code" clearable></el-input>
          <div class="code" @click="refreshCode">
            <Sindentify :identifyCode="identifyCode"></Sindentify>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirm"
          :disabled="loading"
          :loading="loading"
          >{{ loading ? "执行中" : "确认" }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { clear } from "@/api/global/globalSystem";
import rules from "@/rules/global/globalDelivery";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import Sindentify from "@/components/Identify";

export default {
  components: {
    Sindentify,
  },
  data() {
    return {
      radio: "",
      dialogVisible: false,
      identifyCode: "1234",
      code: "",
      loading: false,
    };
  },
  methods: {
    // 列表
    clear() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: this.radio }
      );
      clear(data).then((res) => {
        if (res.errcode == 0) {
          this.loading = false;
          this.dialogVisible = false;
          this.$message.success("重置成功");
        }
      });
    },
    handleInit() {
      if (!this.radio) {
        this.$message.warning("您还未勾选需要初始化的项目");
        return;
      }
      this.loading = false;
      this.refreshCode();
      this.dialogVisible = true;
    },
    confirm() {
      if (this.code != this.identifyCode) {
        this.$message.error("输入的验证码错误");
        this.code = "";
        this.refreshCode();
      } else {
        this.loading = true;
        this.clear();
      }
    },
    randoNum(max, min) {
      let num = "";
      num = Math.floor(Math.random() * (max - min) + min);
      return String(num);
    },
    refreshCode() {
      this.identifyCode = this.randoNum(1000, 9999);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.init-box {
  padding: 20px;
}
.item {
  /deep/.el-radio__label {
    font-size: 16px;
  }
  margin-bottom: 15px;
  .tip_box {
    line-height: 1.5;
    font-size: 14px;
    color: #999;
    padding: 5px 25px;
  }
}
.note {
  width: 800px;
  padding: 10px 15px;
  background-color: #e8e8e8;
  color: #333;
  font-size: 14px;
}
.btn {
  margin: 25px 0;
}

// 弹出层
/deep/.el-dialog__body {
  padding: 10px 20px;
}
/deep/.el-dialog {
  margin-top: 30vh !important;
}
/deep/.el-input__inner {
  height: 36px !important;
}

.title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  i {
    font-size: 20px;
    vertical-align: middle;
    color: #e6a23c;
  }
}
.dialog_container {
  p {
    padding-bottom: 15px;
  }
  .line {
    display: flex;
    align-items: center;
  }
  .code {
    margin-left: 10px;
  }
}
</style>
